<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
</div>

<!--搜索框-->
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" id="roleNameId" name="roleName" placeholder="请输入角色名关键字" autocomplete="off"
                   class="layui-input">
            <button type="button" class="layui-btn layui-btn-normal" onclick="searchRole();">
                <i class="layui-icon layui-icon-search"></i> 查询
            </button>
        </form>
    </div>
</div>
<!--表格上方工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <shiro:hasPermission name="role:add">
            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="addRole()"><i
                    class="layui-icon layui-icon-add-circle"></i>添加
            </button>
        </shiro:hasPermission>
    </div>
</script>

<!--表格工具列-->
<script type="text/html" id="barDemo">
    <shiro:hasPermission name="role:modify">
        <a class="layui-btn layui-btn-xs" lay-event="modify" style="background: orange"> <i class="layui-icon">&#xe63c;</i>编辑</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="role:delete">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> <i class="layui-icon">&#xe640;</i>删除</a>
    </shiro:hasPermission>
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/role/getAllRoleLimit'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , height: 600
            , title: '用户角色表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true, fixed: 'left', width: 70}
                , {field: 'roleName', title: '角色名', width: 100}
                , {field: 'roleDesc', title: '角色描述', width: 400}
                , {
                    field: 'createTime', title: '创建时间',
                    templet: function (d) {
                        return dateToStr(d.createTime);
                    }, width: 180
                }
                , {
                    field: 'modifyTime', title: '修改时间',
                    templet: function (d) {
                        return dateToStr(d.modifyTime);
                    }, width: 180
                }
                , {field: 'createPerson', title: '创建人', width: 80}
                , {field: 'modifyPerson', title: '修改人', width: 80}
                , {title: '工具', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/role/deleteRoleInfo",
                        data: {roleId: data.id},
                        success: function (result) {
                            if (0 == result.code) {
                                layer.msg(result.msg, {icon: 1, time: 1000});
                                obj.del();
                                layer.close(index);
                                //刷新首页
                            } else {
                                layer.msg(result.msg, {icon: 5, time: 1000});
                            }
                        }
                    });
                });
            } else if (obj.event === 'modify') {
                var lay = layer.open({
                    type: 2,
                    title: "角色信息修改",
                    shade: 0.4,
                    area: ['800px', '600px'],
                    maxmin: true,
                    shadeClose: true,
                    content: '/doModifyRoleInfo',
                    fix: false, //不固定
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        //获取子页面的元素，进行数据渲染
                        body.contents().find("#id").val(data.id);
                        body.contents().find('#roleName').val(data.roleName);
                        body.contents().find('#roleDesc').val(data.roleDesc);
                    }
                });
            }
        });
    });

    function dateToStr(date) {
        if (null == date || "" === date) {
            return "";
        }
        var time = new Date(date);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        M = M < 10 ? ("0" + M) : M;
        var d = time.getDate();
        d = d < 10 ? ("0" + d) : d;
        var h = time.getHours();
        h = h < 10 ? ("0" + h) : h;
        var m = time.getMinutes();
        m = m < 10 ? ("0" + m) : m;
        var s = time.getSeconds();
        s = s < 10 ? ("0" + s) : s;
        var str = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
        return str;
    }

    function addRole() {
        var lay = layer.open({
            type: 2,
            title: "角色信息添加",
            shade: 0.4,
            area: ['800px', '600px'],
            maxmin: true,
            shadeClose: true,
            content: '/doAddRoleInfo',
            fix: false
        });
    }

    function searchRole() {
        layui.table.reload("test", {
            page: {
                curr: 1
            },
            where: {
                "roleName": $("#roleNameId").val()
            }
        });
    }
</script>
